import React, { useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { Menu } from "antd";
import {rootRouter} from "@/routers/index"
import {handleRouter, searchRoute } from "@/utils/util";
import type { MenuProps } from "antd";
import Logo from "./components/Logo";
import * as Icons from "@ant-design/icons";
import { connect,useDispatch,useSelector } from "react-redux";
import "./index.less";

const LayoutMenu = (props: any) => {
    const { pathname } = useLocation();
	// const [selectedKeys, setSelectedKeys] = useState<string[]>([pathname]);
    // const [openKeys, setOpenKeys] = useState<string[]>([]);
    const {menuList}=props
	

	const [List, setList] = useState<MenuItem[]>([]);
	// 定义 menu 类型
	type MenuItem = Required<MenuProps>["items"][number];
	const getItem = (
		label: React.ReactNode,
		key?: React.Key | null,
		icon?: React.ReactNode,
		children?: MenuItem[],
		type?: "group"
	): MenuItem => {
		return {
			key,
			icon,
			children,
			label,
			type
		} as MenuItem;
	};
	const getMenuData=(menuList:Menu.MenuOptions[])=>{
		setList(deepLoopFloat(menuList).slice(1))
	}
	const deepLoopFloat = (menuList: Menu.MenuOptions[], newArr: MenuItem[] = []) => {
		menuList.forEach((item: Menu.MenuOptions) => {
			newArr.push(getItem(item.title, item.path,));
		});
		return newArr;
	};
	useEffect(() => {
		getMenuData(menuList);
		
	}, [menuList]);
	
    const navigate = useNavigate();
    const clickMenu: MenuProps["onClick"] = ({ key }: { key: string }) => {
	 console.log(key);
		navigate(key);
	};

	return (
		<div className="menu">
			<Logo></Logo>
				<Menu
					theme="light"
					mode="inline"
					triggerSubMenuAction="click"
					items={List}
					onClick={clickMenu}
				></Menu>
		</div>
	);
};
const mapStateToProps = (state: any) => state.menu;
export default connect(mapStateToProps,null)(LayoutMenu);
